<template>
	<view>
		<view class="list-box">
			<view class="list flex-between">
				<view class="label">头像</view>
				<view class="right flex" @click="uploadImg">
					<image src="/static/imgs/menus1.jpg"></image>
					<view class="iconfont iconyoujiantou1"></view>
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">昵称</view>
				<view class="right flex">
					<input type="text" placeholder="请输入昵称">
					<view class="iconfont iconyoujiantou1"></view>
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">性别</view>
				<view class="right flex" @click="changeSex">
					<input type="text" placeholder="请选择" disabled v-model="sex" >
					<view class="iconfont iconyoujiantou1"></view>
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">用户id</view>
				<view class="right flex">
					<input type="text" disabled v-model="user_id">
					<view class="iconfont iconyoujiantou1"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:123,
				sex:"",
			}
		},
		methods: {
			uploadImg(){
				this.$http.upload().then(res=>{
					
				})
			},
			changeSex(){
				uni.showActionSheet({
				    itemList: ['男', '女'],
				    success:(res)=> {
						console.log(res)
						if(res.tapIndex == 0){
							this.sex = "男"
						}
						if(res.tapIndex == 1){
							this.sex = "女"
						}
				        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			}
		}
	}
</script>

<style lang="less">
	.list-box{
		margin-top: 40rpx;
	}
	.list{
		padding: 30rpx;
		border-bottom: 2px solid #eee;
		background: white;
		.label{
			font-size: 32rpx;
		}
		image{
			width: 100rpx;
			height:100rpx;
			border-radius: 50%;
		}
		input{
			text-align: right;
			font-size: 32rpx;
		}
		.iconfont{
			margin-left: 20rpx;
		}
	}
</style>
